<!-- 
  * Copyright (c) 2022 iSoftStone Information Technology (Group) Co.,Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
  *
  *     http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
 -->
<template>
	<view class="BoxPlan">
		<view class="schedule" v-if="loadingState==='nomore'">
			<u-cell-group>
				<u-cell>
					<view slot="title" class="u-slot-txt">当前活动</view>
					<view slot="value" class="u-slot-value">{{activityName}}</view>
				</u-cell>
				<u-cell>
					<view slot="title" class="u-slot-txt">项目名称</view>
					<view slot="value">{{teamName}}</view>
				</u-cell>
			</u-cell-group>
			<u-gap height="3" bgColor="#f2f2f2"></u-gap>
			<view class="checkBox" v-for="(item,index) in planList" :key="index">
				<u-cell-group>
					<u-cell>
						<view slot="title" class="u-slot-title">{{item.title}}</view>
					</u-cell>
					<u-cell>
						<view slot="title" class="u-slot-txt">审核状态</view>
						<view slot="value">
							<u--text :type="item.textType" :text="item.text"></u--text>
						</view>
					</u-cell>
					<u-cell>
						<view slot="title" class="u-slot-txt">申请时间</view>
						<view slot="value">{{item.createTime}}</view>
					</u-cell>
				</u-cell-group>
				<view class="btnList" v-if="item.btnState">
					<view class="item">
						<u-row>
							<u-col span="4">
								<text class="btn close" v-if="item.btnIndex===0" @click="showclose=true">取消</text>
								<text class="btn error" v-if="item.btnIndex!==0" @click="close()">取消</text>
							</u-col>
							<u-col span="4">
								<view class="linese">
									<u-line lineColor="#ccc" direction="col"></u-line>
								</view>
							</u-col>
							<u-col span="4">
								<template v-if="item.btnIndex!==4&&item.reject!==3">
									<template v-if="item.checkState===3&&item.btnIndex===0">
										<text class="btn submit " @click="submit(item)">重新提交</text>
									</template>
									<text v-else class="btn submit " :class="item.textType"
										@click="submit(item)">{{btnList[item.btnIndex]}}</text>
								</template>
							</u-col>
						</u-row>
					</view>
				</view>
				<u-gap height="3" bgColor="#f2f2f2"></u-gap>
			</view>
			<!-- 开发板申请 -->
			<u-popup :show="show" mode="center" :round="10">
				<view class="public">
					<u--text :text="activityName+'-开发板申请'" align="center" size="16px"></u--text>
					<u-form :model="form" :rules="rules" ref="form" labelPosition="top" labelWidth="100%"
						:borderBottom="false">
						<u-form-item label="所在地区" borderBottom>
							<u--text :text="userInfo.address?userInfo.address:''"></u--text>
						</u-form-item>
						<u-form-item label="详细地址" borderBottom>
							<u--text :text="userInfo.detailedAddress?userInfo.detailedAddress:''"></u--text>
						</u-form-item>
						<!-- <u-form-item prop="privacy" label=" " :labelWidth="0" borderBottom>
							<u-checkbox-group v-model="form.privacy" placement="column">
								<u-checkbox label="隐私条款" name="1"></u-checkbox>
							</u-checkbox-group>
						</u-form-item> -->
						<u-form-item prop="privacy" label=" " :labelWidth="0" borderBottom>
							<view style="display: flex;flex-direction: row;">
								<u-checkbox-group v-model="form.privacy" placement="column">
									<u-checkbox label=" " name="1"></u-checkbox>
								</u-checkbox-group>
								<u-link href="http://localhost::8989/file/static/20220330.docx"
									text="OpenHarmony成长计划学生挑战赛-开发板发放协议.docx"></u-link>
							</view>

						</u-form-item>
						<u-form-item label=" " :labelWidth="0">
							<u-row gutter="10">
								<u-col :span="6">
									<u-button text="取消" type="error" @click="closePub()"></u-button>
								</u-col>
								<u-col :span="6">
									<u-button text="提交" type="primary" @click="submitPub()"></u-button>
								</u-col>
							</u-row>
						</u-form-item>
					</u-form>
				</view>
			</u-popup>
			<u-popup :show="showclose">
				<view class="activeBoxQuit">
					<view class="title">
						<u--text :text="activityName" align="center" size="32rpx" bold margin="0 0 10px 0"></u--text>
						<u--text text="是否确认取消报名，取消报名后，需重新提交报名！"></u--text>
					</view>
					<view class="main">
						<u--text text="取消原因(选填)" margin='10px 0'></u--text>
						<u-checkbox-group v-model="checkboxQuitValue" placement="column" @change="checkboxChange">
							<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxQuitList"
								:key="index" :label="item.name" :name="item.name">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="btn">
						<u-row gutter="10">
							<u-col :span="6">
								<u-button text="取消" type="error" @click="showclose=false"></u-button>
							</u-col>
							<u-col :span="6">
								<u-button text="确认" type="primary" @click="handelQuitConfim()"></u-button>
							</u-col>
						</u-row>
					</view>
				</view>
			</u-popup>
		</view>

		<u-loadmore v-if="loadingState!=='none'" :status="loadingState" nomoreText="我是有底线的" />
		<empty-img v-if="loadingState==='none'"></empty-img>
	</view>
</template>

<script>
	import {
		getRegistrateId,
		getWorkByOpenId,
		addDevelop,
		getDevelopByID,
		appletDevelopCheckEdit,
		editDevelop,
		deletCheck,
		getStudentByOpenId,
		editActiveSignUp,
		getActiveLeader

	} from '@/common/api.js';
	export default {
		props: {
			activityId: Number,
			time: Number
		},
		data() {
			return {
				status: "nomore",
				planList: [],
				textType: "",
				text: "",
				btnList: ["初步方案提交", "开发板申请", "第一次作品提交", "第二次作品提交", "重新提交"],
				show: false, //显示隐藏开发板
				showclose: false, //取消弹窗
				checkboxQuitValue: [],
				// 基本案列数据
				checkboxQuitList: [{
						name: 'a）我需要重新报名',
						disabled: false
					},
					{
						name: 'b）我没时间参加活动',
						disabled: false
					},
					{
						name: 'c）活动体验不好',
						disabled: false
					},
					{
						name: 'd）我不想参加活动了',
						disabled: false
					}
				],
				rules: {
					privacy: {
						type: 'array',
						required: true,
						message: '请勾选',
						trigger: ['change']
					}
				},
				form: {
					privacy: [],
				},
				activityName: "", //活动名称
				teamName: "", //团队名称
				workId: "", //作品ID
				signupId: "", //报名ID
				developId: "", //开发板Id
				recordId: "", //审核ID
				userInfo: {
					address: '',
					detailedAddress: ''
				},
				loadingState: "none",
				loginType: 0,
				isTeamLeader: 0
			}
		},
		watch: {
			time: { //深度监听，可监听到对象、数组的变化
				handler(val, oldVal) {
					this.userInfo = this.$store.state.$userInfo
					if (!this.userInfo.openId) {
						this.loginType = 0
						this.loadingState = "none"

					} else if (!this.userInfo.phone) {
						this.loginType = 1
						this.loadingState = "none"
					} else {
						this.loginType = 2
						this.info()
					}
				},
				deep: true //true 深度监听
			}
		},
		mounted() {
			this.userInfo = this.$store.state.$userInfo
			if (!this.userInfo.openId) {
				this.loginType = 0
				this.loadingState = "none"

			} else if (!this.userInfo.phone) {
				this.loginType = 1
				this.loadingState = "none"
			} else {
				this.loginType = 2
				this.info()
			}
		},
		methods: {
			async info() {
				this.planList = []
				/* 
				 初始化审核进度
				 */
				this.loadingState = "loading"
				let leaderData = await this.getActiveLeader()
				if (!leaderData.id) {
					this.loadingState = "none"
					return false
				}
				console.log(leaderData, "团队首领")
				let studentData = await this.getStudentByOpenId(leaderData) //获取学生信息
				console.log(studentData, "学生信息")
				let siginData = await this.getRegistrateId(leaderData) //获取报名信息
				console.log(siginData, "报名信息")
				let txt = ""
				if (!studentData.id) {
					siginData.text = "学生信息未录入"
					siginData.textType = "primary"
				} else if (studentData.check_state === 1) {
					siginData.text = "学生信息审核中"
					siginData.textType = "primary"
				} else if (studentData.check_state === 3) {
					siginData.text = "学生信息被驳回"
					siginData.textType = "error"
				}
				let workData = await this.getWorkById(leaderData) //获取作品审核信息
				let develop = await this.getDevelopById(leaderData) //获取开发板信息
				this.workId = workData.id
				this.signupId = siginData.id
				this.developId = develop.id
				//this.recordId = develop.recordId
				if (this.signupId) {
					this.loadingState = "nomore"
				} else {
					this.loadingState = "none"
				}
				let firstWorkData = JSON.parse(JSON.stringify(workData))
				firstWorkData.title = "第一次作品提交审核"
				let secondWorkData = JSON.parse(JSON.stringify(workData))
				secondWorkData.title = "第二次作品提交审核"
				secondWorkData.btnIndex = 4
				firstWorkData.createTime = workData.firstTime
				secondWorkData.createTime = workData.secondTime
				if (workData.state === 1) {
					firstWorkData = {}
					secondWorkData = {}
				} else if (workData.state === 2) {
					workData.checkState = 2
					firstWorkData.btnIndex = 3
					secondWorkData = {}
					this.getCheck(workData)
					this.getCheck(firstWorkData)
				} else if (workData.state === 3) {
					workData.checkState = 2
					firstWorkData.btnIndex = 3
					firstWorkData.checkState = 2
					this.getCheck(workData)
					this.getCheck(firstWorkData)
					this.getCheck(secondWorkData)
				}
				if (secondWorkData.checkState) {
					this.changeBtnState(secondWorkData, {})
				}
				if (firstWorkData.checkState) {
					this.changeBtnState(firstWorkData, secondWorkData)
				}
				if (develop.checkState) {
					this.changeBtnState(develop, firstWorkData)
				}
				if (workData.checkState) {
					this.changeBtnState(workData, develop)
				}
				if (siginData.checkState) {
					this.changeBtnState(siginData, workData)
				}
			},
			getActiveLeader() {
				let data = {
					"activityId": this.activityId - 0,
					"phone": this.userInfo.phone,
					"state": 1
				}
				return new Promise((resolve, reject) => {
					let html = getActiveLeader(data).then(res => {
						let resData = {}
						if (res.id) {
							resData = res
						}
						resolve(resData)
					})
				})


			},
			changeBtnState(data1, data2) {
				data1.btnState = true
				if (data1.checkState === 2 && data2.checkState === 1) {
					data1.btnState = false
				} else if (data1.checkState === 2 && data2.checkState === 2) {
					data1.btnState = false
				}
				this.planList.push(data1)
			},
			getStudentByOpenId(leaderuser) {
				const data = {
					openId: leaderuser.openId
				}
				return new Promise((resolve, reject) => {
					let html = getStudentByOpenId(data).then(res => {
						let resData = {}
						if (res.id) {
							resData.id = res.id
							resData.check_state = res.check_state
						}
						resolve(resData)
					})
				})

			},
			getWorkById(leaderuser) {
				const data = {
					activityId: this.activityId - 0,
					openId: leaderuser.openId,
				}
				return new Promise((resolve, reject) => {
					let html = getWorkByOpenId(data).then(res => {
						console.log(res, "这是作品")
						let resData = {}
						if (res.id) {
							resData.id = res.id
							resData.reject = res.reject
							resData.btnIndex = 1
							resData.title = "提案审核进度"
							resData.checkState = res.checkState
							resData.createTime = res.createTime
							resData.state = res.state
							resData.firstTime = res.firstTime
							resData.secondTime = res.secondTime
							this.getCheck(resData)
						}
						resolve(resData)
					})
				})

			},
			getRegistrateId(leaderuser) {
				const data = {
					activityId: this.activityId - 0,
					userId: leaderuser.id
				}
				return new Promise((resolve, reject) => {
					let html = getRegistrateId(data).then(res => {
						let resData = {}
						if (res.id) {
							if (res.groupPhone.indexOf(this.$store.state.$userInfo.phone) === -1) {
								this.isTeamLeader = 0
							} else if (res.groupPhone.indexOf(this.$store.state.$userInfo.phone) === 0) {
								this.isTeamLeader = 1
							} else if (res.groupPhone.indexOf(this.$store.state.$userInfo.phone) > 0) {
								this.isTeamLeader = 2
							}
							this.activityName = res.activityName
							this.teamName = res.signupReason
							resData.id = res.id
							resData.reject = res.reject
							resData.btnIndex = 0
							resData.title = "报名审核进度"
							resData.checkState = res.checkState
							resData.createTime = res.signupTime
							this.getCheck(resData)
						}
						resolve(resData)
					})
				})
			},
			getDevelopById(leaderuser) {
				const data = {
					activityId: this.activityId - 0,
					openId: leaderuser.openId,
				}
				return new Promise((resolve, reject) => {
					let html = getDevelopByID(data).then(res => {
						console.log(res, "开发板")
						let resData = {}
						if (res.id) {
							this.recordId = res.recordId
							resData.id = res.id
							resData.btnIndex = 2
							resData.reject = res.reject
							resData.title = "开发板申请进度"
							resData.checkState = res.checkState
							resData.createTime = res.signupTime
							this.getCheck(resData)
						}
						resolve(resData)
					})
				})
			},
			getCheck(res) {
				if (res.checkState === 1) {
					res.textType = "primary"
					res.text = "审核中"
				} else if (res.checkState === 2) {
					res.textType = "success"
					res.text = "通过"
				} else if (res.checkState === 3) {
					res.textType = "error"
					res.text = "驳回"
					if (res.reject === 3) {
						res.text = "不通过"
					}
				}
			},
			close() {
				uni.$u.toast("不可取消")

			},
			submit(item) {

				/* 
				index:0 跳转作品提交
				index:1 开发板提交
				 */
				console.log(item, "点击信息")
				if (item.checkState === 3 && item.btnIndex === 0) {
					this.$emit("change", 1)
				} else {
					if (item.textType === "primary") {
						uni.$u.toast("正在审核中，不可提交")
					} else if (item.textType === "error") {
						uni.$u.toast("审核驳回，不可提交")
					} else {
						if (item.btnIndex === 1) {
							this.show = true
						} else {
							this.$u.route({
								url: 'pages/componet/activity/towork/index?id=' + (this.activityId - 0) +
									"&index=" +
									item.btnIndex,
							})
						}
					}
				}


			},
			submitPub() {
				if (!this.userInfo.address || !this.userInfo.detailedAddress) {
					uni.showModal({
						content: "您的收货地址不完整，请填写",
						confirmText: "去填写",
						cancelText: "取消",
						success: function(res) {
							if (res.confirm) {
								uni.$u.route({
									url: 'pages/componet/main/edit/edit',
								})
							}
						}
					})
					return false
				}
				const that = this
				this.$refs.form.validate().then(res => {
					if (res) {
						const data = {
							workId: this.workId - 0,
							activityId: this.activityId - 0,
							openId: this.$store.state.$userInfo.openId,
							signupId: this.signupId,
							applyAddress: this.userInfo.address,
							detailedAddress: this.userInfo.detailedAddress,
							state: 1
						}
						this.show = false
						if (this.developId) {
							data.id = this.developId
							editDevelop(data).then(res => {
								const dataCheck = {
									id: this.recordId,
									checkState: 1
								}
								this.info()
								appletDevelopCheckEdit(dataCheck).then(result => {
									console.log(result)
								})
							})

						} else {
							addDevelop(data).then(result => {
								console.log(result)
								this.info()
							})
						}
					}
				})
			},
			closePub() {
				this.show = false
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			handelQuitConfim() {
				if (this.isTeamLeader === 2) {
					uni.$u.toast("您不是团队负责人")
					return false
				} else if (this.isTeamLeader === 0) {
					uni.$u.toast("您不在团队内")
					return false
				}
				const data = {
					activityId: this.activityId,
					openId: this.$store.state.$userInfo.openId,
					state: 2,
					reason: this.checkboxQuitValue.toString(),
					id: this.signupId
				}
				editActiveSignUp(data).then(res => {
					//uni.$u.toast("活动报名取消成功")
					this.showclose = false
					uni.showModal({
						content: "你已确认取消报名，若需重新报名，可再次提交。",
						success: (result) => {

						}
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-cell {
		height: auto !important;
	}

	.BoxPlan {
		padding-bottom: 100rpx;

		.u-slot-close {
			width: 150rpx;

		}

		.schedule {
			background: #FFFFFF;
			margin-top: 16rpx;

			.u-slot-title {
				font-size: 16px;
				font-weight: bold;
			}

			.u-slot-txt {
				font-size: 16px;
				width: 160rpx;
			}

			.u-slot-value {
				word-wrap: break-word;
				word-break: normal;
				width: calc(100% - 160rpx);
			}


			.title {
				font-size: 16px;
				color: #000;
				// font-weight: bold;
			}

			.success {
				font-size: 28rpx;
				color: #64BB5C;
			}

			.text {
				font-size: 28rpx;
				color: #666666;
			}

			.red {
				font-size: 28rpx;
				color: #E84026;
			}

			.bottom {
				background: #FFFFFF;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;

				.text {
					font-size: 32rpx;
					color: #0A59F7;
					text-align: center;
				}
			}

			.bottomplan {
				width: 100%;
				background: #FFFFFF;
				height: 96rpx;
				line-height: 96rpx;
				display: flex;
				justify-content: center;

				.strip {
					// color: #F7F7F7;
					color: #cccccc;
					height: 48rpx;
				}

				.text {
					font-size: 32rpx;
					color: #0A59F7;
					text-align: center;
					width: 50%;
				}
			}
		}
	}

	.btnList {
		padding: 26rpx 24rpx;

		.linese {
			height: 40rpx;
			display: flex;
			justify-content: center;
		}

		.item {
			margin: 20rpx 0;
			position: relative;
		}

		.btn {
			width: 200rpx;
			text-align: left;
			border-radius: 3px;
			font-size: 30rpx;
			display: inline-block;
			line-height: 60rpx;
			height: 60rpx;
			//color: #FFF !important;

			&.close {
				color: #E84026 !important;
			}

			&.submit {
				position: absolute;
				right: 0;
				color: #0A59F7 !important;
				top: -12px;
				width: 300rpx;
				text-align: right;
			}

			&.primary {
				color: #CCC !important;
			}

			&.error {
				color: #CCC !important;
			}
		}
	}

	.public {
		width: 700rpx;
		padding: 20rpx;
	}

	.activeBoxQuit {
		padding: 20px;

		.title {
			margin: 10px 0;
		}

		.btn {
			margin: 10px 0;

		}
	}
</style>
